<template lang="">
  <h3>{{ $t("touZ-3") }}</h3>

  <a-space direction="vertical">
    <div class="filter-area" style="margin-bottom: 15px">
      <a-space>
        <div>
          <span>{{ $t("xuan-1") }}</span>
          <a-range-picker
            :ranges="ranges"
            v-model:value="formData.dates"
            format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <div>
          <span>全部类型</span>
          <a-select
            v-model:value="formData.game_kind"
            style="width: 200px"
            :options="gameKinds"
            allowClear
          ></a-select>
        </div>
        <div>
          <span>{{ $t("quan-3") }}</span>
          <a-select
            v-model:value="formData.game_type_id"
            style="width: 200px"
            :options="gameTypeList"
            allowClear
          ></a-select>
        </div>
        <div>
          <span>游戏渠道</span>
          <a-select
            v-model:value="formData.game_channel_id"
            style="width: 200px"
            :options="gameChannel"
            allowClear
          ></a-select>
        </div>
      </a-space>
    </div>

    <BettingSummarizeRecord :totalInfo="totalInfo" />

    <a-typography-title :level="5">{{ $t("touZ-4") }}</a-typography-title>
    <a-table
      :columns="columns"
      :row-key="(record) => record.id"
      :data-source="list"
      :loading="loading"
      :pagination="pagination"
      bordered
      :scroll="{ y: 600 }"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'payout'">
          <a-tag v-if="text === 1" color="success">{{
            getPayoutStatus(1)
          }}</a-tag>
          <a-tag v-else color="error">{{ getPayoutStatus(0) }}</a-tag>
        </template>
      </template>
    </a-table>
  </a-space>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount, computed, watch } from "vue";
import BettingSummarizeRecord from "./components/BettingSummarizeRecord.vue";
import { useI18n } from "vue-i18n";
import {
  getBettingRecord,
  type TGetBettingRecordParams,
} from "@/api/financial";
import { useGameChannelStore } from "@/stores/gameChannel";
import { useGameInfoStore } from "@/stores/gameInfo";
import dayjs, { Dayjs } from "dayjs";

const { t } = useI18n();

const gameChannelStore = useGameChannelStore();
const gameInfoStore = useGameInfoStore();

function getPayoutStatus(status: number) {
  const statusMaps: any = {
    0: t("weiP"),
    1: t("yiPa"),
  };

  return statusMaps[status] || "";
}
const gameChannel = computed(() => {
  let result: any[] = [];
  if (Array.isArray(gameChannelStore.gameChannleList)) {
    result = gameChannelStore.gameChannleList.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
  return result;
});
const gameKinds = computed(() => {
  let result: any[] = [];
  if (Array.isArray(gameInfoStore.gameKinds)) {
    result = gameInfoStore.gameKinds.map((item) => {
      return {
        label: item.name,
        value: item.type,
      };
    });
  }
  return result;
});

const gameTypeList = computed(() => {
  let result: any[] = [];
  if (Array.isArray(gameInfoStore.gameTypeList)) {
    console.log(gameInfoStore.gameTypeList, 111);
    result = gameInfoStore.gameTypeList.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
  return result;
});

const totalInfo = ref<any>({});
const list = ref<any[]>([]);

const loading = ref<boolean>(false);
const pagination = ref<any>({
  total: 0,
  current: 1,
  pageSize: 10,
});
const ranges = ref<any>({
  今天: [dayjs().startOf("day"), dayjs().endOf("day")],
  昨天: [
    dayjs().subtract(1, "day").startOf("day"),
    dayjs().subtract(1, "day").endOf("day"),
  ],
  "近七天 (不包括今天)": [
    dayjs().subtract(7, "day").startOf("day"),
    dayjs().subtract(1, "day").endOf("day"),
  ],
  "近一周 (包括今天)": [
    dayjs().subtract(6, "day").startOf("day"),
    dayjs().endOf("day"),
  ],
  本周: [dayjs().startOf("week"), dayjs().endOf("week")],
  "近一个月 (不包括今天)": [
    dayjs().subtract(30, "day").startOf("day"),
    dayjs().subtract(1, "day").endOf("day"),
  ],
  上月: [
    dayjs().subtract(1, "month").startOf("month"),
    dayjs().subtract(1, "month").endOf("month"),
  ],
  本月: [dayjs().startOf("month"), dayjs().endOf("month")],
});

const formData = reactive<TGetBettingRecordParams>({
  start: "",
  end: "",
  client_id: undefined,
  game_channel_id: undefined,
  game_type_id: undefined,
  game_kind: "",
  dates: [],
});
watch(
  () => formData,
  (value) => {
    console.log(value);
    pagination.value.current = 1;
    fetchList();
  },
  {
    deep: true,
  }
);

function handleDateValue(dates: any) {
  let data: any = {};
  if (Array.isArray(dates)) {
    dates = dates.map((date: any) => dayjs(date).format("YYYY-MM-DD HH:mm:ss"));
    console.log(dates, 121212);

    data.start = dates[0];
    data.end = dates[1];
  } else {
    data.start = "";
    data.end = "";
  }
  return data;
}

const columns = [
  {
    title: t("youX-7"),
    dataIndex: "game_type_display_name",
    key: "game_type_display_name",
  },
  {
    title: t("quDa"),
    dataIndex: "game_channel_name",
    key: "game_channel_name",
  },
  // {
  //   title: t('biSh'),
  //   dataIndex: 'total_bet_count',
  //   key: 'total_bet_count',
  // },
  {
    title: t("touZ-5"),
    dataIndex: "bet_amount",
    key: "bet_amount",
  },
  {
    title: t("youX-8"),
    dataIndex: "valid_bet_amount",
    key: "valid_bet_amount",
  },
  {
    title: "派彩",
    dataIndex: "payout",
    key: "payout",
  },
  {
    title: t("shuY"),
    dataIndex: "win_and_loss",
    key: "win_and_loss",
  },
  // {
  //   title: '存款',
  //   dataIndex: 'total_deposit',
  //   key: "total_deposit",
  // },
  // {
  //   title: '取款',
  //   dataIndex: 'total_withdraw',
  //   key: "total_withdraw",
  // },
  {
    title: "时间",
    dataIndex: "date",
    key: "date",
  },
];

function fetchList(params?: TGetBettingRecordParams & {}) {
  loading.value = true;
  const newFormData = {
    ...formData,
  };
  const dateInfo = handleDateValue(newFormData.dates);
  delete newFormData.dates;
  getBettingRecord({
    ...newFormData,
    ...dateInfo,
    pageSize: pagination.value.pageSize,
    current: pagination.value.current,
    ...params,
  })
    .then((res: any) => {
      const { list: data, pagination_result, total } = res;
      if (Array.isArray(data)) {
        list.value = data;
      } else {
        list.value = [];
      }

      if (total) {
        totalInfo.value = total;
      }

      if (pagination_result) {
        pagination.value.total = pagination_result.total;
        pagination.value.current = pagination_result.current;
        pagination.value.pageSize = pagination_result.pageSize;
      }
    })
    .catch((err: any) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
}

const handleTableChange = (
  page: { pageSize: number; current: number },
  filters: any,
  sorter: any
) => {
  pagination.value.pageSize = page.pageSize;
  pagination.value.current = page.current;

  fetchList();
};

onBeforeMount(() => {
  fetchList();
  gameInfoStore.updateGameType();
});
</script>

<style lang=""></style>
